<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0"/>
        <title></title>
        <!-- IMPORT CSS -->
        <link rel="stylesheet" href="reset.min.css" />
        <style>
            .tabBox {
                margin: 20px auto;
                width: 500px;
            }

            .tabBox .tab {
                position: relative;
                top: 1px;
            }

            .tabBox .tab li {
                float: left;
                margin-right: 10px;
                padding: 0 10px;
                height: 35px;
                line-height: 35px;
                font-size: 14px;
                border: 1px solid #aaa;
                background: #f6f7fb;
                cursor: pointer;
            }

            .tabBox .tab li.active {
                background: #fff;
                border-bottom-color: #fff;
            }

            .tabBox div {
                display: none;
                padding: 10px;
                height: 100px;
                border: 1px solid #aaa;
                background: #fff;
            }

            .tabBox div.active {
                display: block;
            }
        </style>
    </head>

    <body>
        <section class="tabBox" id="tabBox">
            <ul class="tab clearfix">
                <li class="active">编程</li>
                <li>读书</li>
                <li>运动</li>
            </ul>
            <div class="active">编程可以使我“赚取高薪”</div>
            <div>读书可以使我“修身养性”</div>
            <div>运动可以使我“身体健康”</div>
        </section>

       <section class="tabBox" id="tabBox2">
            <ul class="tab clearfix">
                <li class="active">编程</li>
                <li>读书</li>
                <li>运动</li>
            </ul>
            <div class="active">编程可以使我“赚取高薪”</div>
            <div>读书可以使我“修身养性”</div>
            <div>运动可以使我“身体健康”</div>
        </section>

        <section class="tabBox" id="tabBox3">
            <ul class="tab clearfix">
                <li class="active">编程</li>
                <li>读书</li>
                <li>运动</li>
            </ul>
            <div class="active">编程可以使我“赚取高薪”</div>
            <div>读书可以使我“修身养性”</div>
            <div>运动可以使我“身体健康”</div>
        </section>
        
    </body>
    <script src="jquery.min.js"></script>
    <script>
		// $(function(){
		// 	$("li","#tabBox3").click(function(){
		// 		$(this).addClass("active").siblings().removeClass('active');
		// 		let index=$(this).index();
		// 		$("div","#tabBox3").eq(index).addClass("active").siblings().removeClass('active')
		// 	})
		// })
		
		// $.fn.extend({
		// 	tab(){
		// 		let _this=this;
		// 		$("li",this).click(function(){
		// 			$(this).addClass("active").siblings().removeClass('active');
		// 			let index=$(this).index();
		// 			$("div",_this).eq(index).addClass("active").siblings().removeClass('active');
		// 		})
		// 	}
		// })
		// $("#tabBox").tab();
		// $("#tabBox2").tab();
		// $("#tabBox3").tab();
		
		
        // 绑定点击事件
        // $(function () {
        //     $('li').click(function () {
        //         // console.log(this);原生对象
        //         // 给点击的元素增加active类名
        //         $(this).addClass('active').siblings().removeClass('active');
        //         let n = $(this).index();
        //         // $($('div')[n])
        //         // 获取div中对应的那一项增加active类名，并给其兄弟元素去掉active
        //         $('div').eq(n).addClass('active').siblings().removeClass('active');
        //     });
        // });

        // 用extend方法在jQuery原型上封装函数
        $.fn.extend({
          tab:function(){
            console.log(this);
            // this是tab执行时点前面的,this也是我们增加选项卡的范围
            // #tabBox里面的li
            let _this = this;
            $('li', this).click(function() {
                $(this).addClass('active').siblings().removeClass('active');
                let n = $(this).index();
                $('div', _this).eq(n).addClass('active').siblings().removeClass('active');
            })
          }
        })
        $('#tabBox').tab();
        $('#tabBox2').tab();
        $('#tabBox3').tab();
    </script>
</html>
